
<template>
  <div class="execution">
    <el-dialog
      :title="mode === 'import' ? '导入数据' : mode === 'verify' ? '确认数据' : mode === 'edit' ? '编辑数据' : '预览数据'"
      :visible="!!mode || !!previewTable"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
      :destroy-on-close="true"
      width="80%"
    >
      <ImportData
        v-if="mode === 'import'"
        @uploadSuccess="mode = 'verify'"
        @close="handleClosedDialog"
      />
      <Verify
        v-else-if="mode === 'verify'"
        @done="handleClosedDialog"
        @close="handleClosedDialog"
      />
      <Preview
        v-else-if="previewTable !== null"
        @close="previewTable = null"
        :target="previewTable"
      />
      <Edit
        v-else-if="mode === 'edit'"
        :target="current"
        @close="handleClosedDialog"
      />
    </el-dialog>
    <basic-container>
      <avue-crud
        ref="crud"
        :page="page"
        :data="tableData"
        :permission="permissionList"
        :table-loading="tableLoading"
        :option="tableOption"
        @on-load="getList"
        @search-change="searchChange"
        @search-reset="searchReset"
        @refresh-change="refreshChange"
        @row-update="handleUpdate"
        @selection-change="selectionChange"
      >
        <template
          slot-scope="scope"
          slot="menu"
        >
          <el-button
            v-if="permissionList.editBtn"
            @click="handleEditClick(scope.row)"
            type="text"
            size="small"
          >编辑</el-button>
        </template>
        <!-- <template
          slot="searchMenu"
          slot-scope="{row,size}"
        >
          <el-button
            v-if="permissionList.export"
            @click="exportClick(row)"
          >导出</el-button>
        </template> -->
        <template slot="menuLeft">
          <avue-radio
            :button="true"
            v-model="extraParam.returnOrderType"
            :dic="orderTypeOptions"
          ></avue-radio>
        </template>
        <template slot="menuRight">
          <el-button
            v-if="permissionList.export"
            @click="exportClick"
          >导出</el-button>
          <el-button
            v-if="extraParam.returnOrderType === '3' && permissionList.import"
            type="primary"
            size="small"
            @click="handleImport"
          >导入</el-button>
          <el-button
            v-if="permissionList.confirm"
            type="primary"
            size="small"
            @click="handleConfirm"
          >确认</el-button>
        </template>
      </avue-crud>
    </basic-container>
  </div>
</template>

<script>
import { fetchList, getObj, confirm, putObj, dataExport } from '@/api/rca/swckelectronicreceipt'
import { tableOptionMap, orderType as orderTypeOptions } from '@/const/crud/rca/swckelectronicreceipt'
import { mapGetters } from 'vuex'
import { handleExcelResponse, getQueryString } from "@/util/util";
import { dateFormat } from '@/util/date';
import ImportData from "./components/ImportData";
import Verify from "./components/Verify";
import Preview from "./components/Preview";
import Edit from "./components/Edit";

export const startDate = dateFormat(new Date(), 'yyyy-MM-') + '01';
export const endDate = dateFormat(new Date(), 'yyyy-MM-dd');

export default {
  name: 'swckelectronicreceipt',
  components: {
    ImportData,
    Verify,
    Preview,
    Edit
  },
  data () {
    return {
      orderTypeOptions: orderTypeOptions,
      searchForm: {
        bookkeepingTime: [startDate, endDate],
      },
      tableData: [],
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 20 // 每页显示多少条
      },
      tableLoading: false,

      selection: [],
      extraParam: {
        returnOrderType: "1",
      },

      mode: null,
      current: null,
      previewTable: null,
    }
  },
  computed: {
    ...mapGetters(['permissions']),
    permissionList () {
      return {
        import: this.vaildData(this.permissions.sw_ck_electronic_receipt_tmp_import, false),
        export: this.vaildData(this.permissions.rca_swckelectronicreceipt_export_excel, false),
        confirm: this.vaildData(this.permissions.rca_swckelectronicreceipt_confirm_status, false),
        editBtn: this.vaildData(this.permissions.rca_swckelectronicreceipt_edit, false)
      };
    },
    tableOption () {
      return tableOptionMap[this.returnOrderType]
    },
    returnOrderType () {
      return this.extraParam.returnOrderType;
    },
  },
  watch: {
    returnOrderType: function () {
      this.$refs.crud.searchReset();
      this.page.currentPage = 1;
      this.getList(this.page);
    },
  },
  methods: {
    handleEditClick (record) {
      this.current = record
      this.mode = 'edit'
    },
    getList (page, params) {
      this.tableLoading = true
      const { bookkeepingTime = [] } = this.searchForm;
      const [startDate, endDate] = bookkeepingTime;
      fetchList(Object.assign({
        current: page.currentPage,
        size: page.pageSize,
        startDate,
        endDate,
      }, params, this.searchForm, this.extraParam)).then(response => {
        this.tableData = response.data.data.records
        this.page.total = response.data.data.total
        this.tableLoading = false
      }).catch(() => {
        this.tableLoading = false
      })
    },
    async exportClick (row) {
      // await this.searchChange(row, () => { });
      this.dataExport();
    },
    async dataExport () {
      const { bookkeepingTime = [] } = this.searchForm;
      const [startDate, endDate] = bookkeepingTime;
      let loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      })
      try {
        const res = await dataExport(Object.assign({}, this.extraParam, this.searchForm, { startDate, endDate, exIdList: this.selection.length ? this.selection : undefined }));
        // const order = orderTypeOptions.find(o => o.value === this.returnOrderType)
        // handleExcelResponse(res, `${startDate}至${endDate}【${order.label}】电子回执单导出.xlsx`);
        handleExcelResponse(res);
      } finally {
        loading.close();
      }
    },
    handleUpdate: function (row, index, done, loading) {
      putObj(row).then(data => {
        this.$message.success('修改成功')
        this.getList(this.page)
        done()
      }).catch(() => {
        loading();
      });
    },
    handleConfirm: function () {
      if (this.selection.length === 0) {
        this.$message.error('请选择要确定的数据');
        return;
      }
      confirm({
        idList: this.selection,
        returnOrderType: this.returnOrderType
      }).then(data => {
        this.$message.success('确定成功')
        this.getList(this.page)
        done()
      }).catch(() => {
      });
    },
    selectionChange (list) {
      this.selection = list.map(l => l.id);
    },
    async searchChange (form, done) {
      this.searchForm = { ...form, ...this.extraParam };
      try {
        await this.getList(this.page, this.searchForm);
      } finally {
        done();
      }
    },
    refreshChange () {
      this.getList(this.page)
    },
    handleView (row, index) {
      this.previewTable = row
    },
    handleImport () {
      this.mode = 'import'
    },
    searchReset () {
      this.page.currentPage = 1
      this.getList(this.page);
    },
    handleClosedDialog () {
      this.mode = null
      this.refreshChange()
    }
  }
}
</script>
